<template>
    <div id="middle">
  <!-- 展示应用区域-->
  <transition-group name="el-zoom-in-center">
      <AppFrame 
      v-for="v in processes" 
      :key="v[1].getId()"
      :process="v[1]">
    </AppFrame>
  </transition-group>
    </div>
  </template>
  <script>
  import Manage from './apps/Manage.vue'
  import AppHeader from './headers/AppHeader.vue'
  import TextEditor from './apps/TextEditor.vue'
  import YMarkdownEditor from './apps/YMarkdownEditor.vue'
  import PdfView from './apps/PdfView.vue'
  import {mapState,mapGetters} from 'vuex'
  import Frame from './Frame.vue'
  import Setting from './apps/Setting.vue'
  import FolderManager from './apps/FolderManager.vue'
  import YTerm from './apps/YTerm.vue'
  import System from '../classes/System'
  import AppEnum from '../classes/AppEnum'
  export default {
  name:'NewMiddle',
  computed:{
      ...mapState('appAbout',['apps']),
      ...mapGetters('appAbout',['allProcesses']),
      processes(){
        console.log(System.processManage.getProcesses())
        return System.processManage.getProcesses()
      }
  },
  mounted(){
  },
  components:{
      AppFrame: Frame,
      Setting,
      FolderManager,
      TextEditor,
      AppHeader,
      YMarkdownEditor,
      PdfView,
      YTerm,
      Manage
  },
  methods:{
    nameToId(name){
        return AppEnum.nameToId(name)
    }
  },
  created(){
    System.setSystemFrame(this)
  }
  }
  </script>
  
  <style scoped lang="less">
  /deep/.vdr.active:before{
    outline:none
  }
  </style>